<!--单行文本-->
<template>
  <el-autocomplete
    v-model="value"
    v-bind="$attrs"
    :id="'c' + meta.columnId"
    :name="'c' + meta.columnId"
    :clearable="clearable"
    :fetch-suggestions="querySearch"
  >
    <template #default="{ item }">
      <div class="name">
        {{ item.value }}
        <span class="addr" style="float:right">{{ item.label }}</span>
      </div>
    </template>
  </el-autocomplete>
</template>

  
<script setup lang="ts" generic="T extends object">
  import type { IFormChildProps } from '../map'
  import { itemController, loadController } from '../map'
  import { EControlType } from '../map'

  defineOptions({
    name: 'nf-el-form-item-autocomplete',
    inheritAttrs: false,
  })

  // 定义 props
  const props = withDefaults(defineProps<IFormChildProps<T>>(), {
    meta: () => {
      return {
        colName: '',
        controlType: EControlType.autocomplete
      }
    },
    model: () => {
      return {} as T
    },
    clearable: true 
  })
  
  const { value } = itemController(props)
  
  // com的查询事件
  const querySearch = (str, cb) => {
    // const results = str
    //  ? props.optionList.filter((item) =>
    //      item.value.indexOf(str.toString().toLowerCase()) === 0)
    //  : props.optionList

    // 调用 callback 返回建议列表的数据
    cb(props.optionList)
    // cb(results)
  }

  // 从后端获取数据
  const { loadDict } = loadController(props)
  loadDict()

</script>